---
title: 从 SvelteKit 迁移
description: 将现有的 SvelteKit 项目迁移到 Astro 的提示
sidebar:
  label: SvelteKit
type: migration
stub: true
framework: SvelteKit
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { CardGrid, LinkCard } from '@astrojs/starlight/components';

[SvelteKit](https://kit.svelte.dev) 是一个基于 Svelte 构建 Web 应用程序的框架。

## SvelteKit 和 Astro 的主要相似之处

SvelteKit 和 Astro 有一些相似之处，可以帮助你迁移你的项目：

- SvelteKit 和 Astro 都是现代 JavaScript 静态站点生成器和服务器端渲染框架。

- SvelteKit 和 Astro 都存在一个 [`src/` 文件目录在你的项目文件](/zh-cn/basics/project-structure/#src) 以及一个 [基于文件路由的特定文件目录](/zh-cn/basics/astro-pages/)。为你的网站创建和管理页面应该会感觉很熟悉。

- Astro 有[一个使用 Svelte 组件的官方集成](/zh-cn/guides/integrations-guide/svelte/)，并支持[安装 NPM 包](/zh-cn/guides/imports/#npm-包)，包括一些用于 Svelte 的包。你将能够编写 Svelte UI 组件，并且可能做到保留部分或全部现有的组件和依赖项。

- Astro 和 SvelteKit 都允许你使用 [无头（headless） CMS、API 或 Markdown 文件进行数据获取](/zh-cn/guides/data-fetching/)。你可以继续使用你喜欢的创作内容系统，并且能够保留你现有的内容。

## SvelteKit 和 Astro 的主要不同之处

当你将 SvelteKit 网站重构为 Astro 时，你会注意到一些重要的不同之处：

- Astro 网站是多页面应用程序，而 SvelteKit 默认为支持服务器端渲染的 SPA（单页面应用程序），但也可以创建 MPA、传统 SPA，或者你可以在应用程序中混合使用这些技术。

- [组件](/zh-cn/basics/astro-components/)：SvelteKit 使用 [Svelte](https://svelte.dev)。Astro 页面使用 [`.astro` 组件](/zh-cn/basics/astro-components/) 构建，但也可以支持 [React、Preact、Vue.js、Svelte、SolidJS、AlpineJS](/zh-cn/guides/framework-components/) 和原始 HTML 模板。

- [内容驱动](/zh-cn/concepts/why-astro/#内容驱动)：Astro 旨在展示你的内容，并允许你仅在需要时选择加入交互性。现有的 SvelteKit 应用程序可能是为客户端的高交互性而构建的。Astro 内置有能够处理内容的功能，例如页面生成，但是一些使用 `.astro` 组件难以复制、更具挑战性的功能，可能需要高级 Astro 技术来处理，例如仪表盘。

- [Markdown 支持就绪](/zh-cn/guides/markdown-content/)：Astro 包含内置的 Markdown 支持，并且包含用于每个文件的页面模板的一个 [特殊的前置 YAML `layout` 属性](/zh-cn/basics/layouts/#markdown-布局)。如果你正在将 SvelteKit 的基于 Markdown 的博客转换为 Astro，你将不需要安装单独的 Markdown 集成，并且你不需要通过配置文件设置布局。你可以将现有的 Markdown 文件带入，但是你可能需要重新整理下这些文件，因为 Astro 的基于文件的路由不需要为每个页面路由创建一个文件夹。

## 从 SvelteKit 切换到 Astro

要将 SvelteKit 博客转换为 Astro，请从我们的博客主题起始模板开始，或者在我们的[主题展示](https://astro.build/themes/)中探索更多社区博客主题。

你可以将 `--template` 参数传递给 `create astro` 命令，以便使用其中一个模板开始一个新的 Astro 项目。或者，你可以[从 GitHub 上的任何现有的 Astro 的存储库中开始一个新项目](/zh-cn/install-and-setup/#通过-cli-向导安装)。

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm create astro@latest -- --template blog
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm create astro@latest --template blog
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn create astro --template blog
    ```
    </Fragment>
  </PackageManagerTabs>

将现有的 Markdown（或 MDX，使用我们的可选集成）文件作为内容去 [创建 Markdown 或 MDX 页面](/zh-cn/guides/markdown-content/)。

Astro 中的文件路由和布局组件是相似的，你可能会希望阅读有关 [Astro 项目结构](/zh-cn/basics/project-structure/) 的内容，以了解文件应该放在哪里。

当去转换其他类型的网站，例如作品集或文档网站，可以在 [astro.new](https://astro.new) 上找到更多官方的起始模板。你将会找到每个项目的 GitHub 存储库的链接，以及在 IDX、StackBlitz、CodeSandbox 和 Gitpod 在线开发环境中打开一个工作项目的一键链接。

## 社区资源

<CardGrid>

  <LinkCard title="从 SvelteKit 到 Astro 重写我的博客" href="https://kharann.com/blog/rewriting-my-blog/"/>

</CardGrid>

:::note[有想要分享的资源吗？]
如果你找到（或制作）了一个关于将 SvelteKit 网站转换为 Astro 的有用的视频或博客文章，请将其 [添加到这个列表中](https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/migrate-to-astro/from-sveltekit.mdx)！
:::
